<template>
  <div>
    <div class="todo-footer">
      <label>
        <input type="checkbox" v-model="updateAll" />
      </label>
      <span>已完成{{ checkAll }}</span> <span>/ 全部{{ total }}</span>
      <button class="btn btn-danger" @click="delAll" v-show="checkAll">清除已完成任务</button>
    </div>
    <!-- <h1>恭喜你没有任何任务要完成！</h1> -->
  </div>
</template>

<script>
// 在这个绑定事件，修改数据，在list里面触发修改

export default {
  name: "Footer",
  data() {
    return {
      checkAll: 0,
      total: 0,
    };
  },
  //修改数据谁的数据就在那里绑定事件，要修改foot数据，在list触发
  // list先执行beforeCreate,created,beforeMount,
  // 之后在执行footer的beforeCreate,created,beforeMount
  // list在footer前面，只有在挂载触发footer绑定的事件，footer要在mounted之前绑定事件
  beforeCreate() {
    console.log("footerbeforeCreate");
  },
  beforeMount() {
    console.log("footerBeforeMount");
  },
  mounted() {
    console.log("footerMount");
  },
  created() {
    this.$globalBus.$on("totalCount", this.totalCount);
    this.$globalBus.$on("checkAllCount", this.checkAllCount);
  },
  beforeDestroy() {
    this.$globalBus.$off("totalCount", this.totalCount);
    this.$globalBus.$off("checkAllCount", this.checkAllCount);
  },
 watch:{
   total:{
     handler(){
       console.log("footerWatch");
     },
     immediate:true
   }
 },
  methods: {
    totalCount(list) {
      let newList = [...list];
      this.total = newList.length;
    },
    checkAllCount(list) {
      let newList = [...list];
      this.checkAll = newList.filter((item) => item.isDone).length;
    },
    delAll(){
      this.$globalBus.$emit('delAll')
    }
  },
  computed: {
    updateAll: {
      get() {
        return this.checkAll === this.total && this.total != 0;
      },
      set(val) {
        this.$globalBus.$emit("isCheckAll", val);
      },
    },
  },
};
</script>

<style>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>